<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="shortcut icon" href="assets/img/favicon1.png" />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/vendors/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/vendors/fontawesome/css/all.min.css" />
    <link rel="stylesheet" href="assets/vendors/slick/slick.css" />
    <link rel="stylesheet" href="assets/vendors/slick/slick-theme.css" />
    <link rel="stylesheet" href="assets/vendors/animation/animate.css" />
    <link rel="stylesheet" href="assets/vendors/magnify-popup/magnific-popup.css" />
    <link rel="stylesheet" href="assets/vendors/circle-progressbar/circularprogress.css" />
    <link rel="stylesheet" href="assets/css/style.css?v=1.0.1" />
    <link rel="stylesheet" href="assets/css/responsive.css?v=1.0.1" />
    <meta name="description" content="{$site_description}" />
    <meta name="keywords" content="{$site_keywords}" />
    <title>{$site_name} - {block name="title"}{/block}</title>
    <style>
        .card {
            position: relative;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            flex-direction: column;
            min-width: 0;
            word-wrap: break-word;
            /* background-color: #fff; */
            background-clip: border-box;
            border: 0 !important;
            border-radius: .25rem;
        }

        .card-header {
            padding: 1.55rem 1.25rem;
            margin-bottom: 0;
            background-color: rgba(0, 0, 0, .03);
            border-bottom: 0 !important;
            cursor: pointer;
        }

        .accordion-header .custom-icon {
            display: inline-block;
            margin-right: 12px;
            transition: transform 0.3s ease;
            color: rgb(241, 80, 26);
            font-size: 20px;
        }

        .accordion-header[aria-expanded="true"] .custom-icon {
            transform: rotate(180deg);
        }

        /* 新增图片相关样式 */
        .link-item {
            flex: 0 0 auto;
            width: 250px;
            margin: 0 10px;
            padding: 12px;
            background-color: #f8f9fa;
            border-radius: 8px;
            text-align: center;
            display: flex;
            /* 改为弹性布局 */
            flex-direction: column;
            /* 垂直排列 */
        }

        .item-image {
            width: 100%;
            height: 80px;
            /* 固定图片高度 */
            object-fit: cover;
            /* 保持图片比例 */
            border-radius: 4px;
            margin-bottom: 10px;
            /* 图片文字间距 */
        }

        .item-text {
            font-size: 0.9rem;
            color: #333;
            line-height: 1.4;
            flex-grow: 1;
            /* 文字部分自动填充剩余空间 */
            overflow: hidden;
            /* 超出部分隐藏 */
            display: -webkit-box;
            -webkit-line-clamp: 3;
            /* 限制显示行数 */
            -webkit-box-orient: vertical;
            margin-bottom: 0 !important;
        }

        .links-container {
            position: relative;
            overflow-x: hidden;
            /* 隐藏默认滚动条 */
            padding: 1rem 0;
            margin-bottom: 100px;
        }

        .scroll-wrapper {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            scroll-behavior: smooth;
            /* 平滑滚动 */
            -ms-overflow-style: none;
            /* IE 和 Edge */
            scrollbar-width: none;
            /* Firefox */
        }

        /* 隐藏滚动条 */
        .scroll-wrapper::-webkit-scrollbar {
            display: none;
        }

        .link-item:first-child {
            margin: 0 !important;
        }

        .link-item:last-child {
            margin: 0 !important;
        }

        .scroll-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            border: none;
            color: white;
        }

        .scroll-btn:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        .scroll-btn.prev {
            left: 10px;
        }

        .scroll-btn.next {
            right: 10px;
        }

        @media (max-width: 768px) {
            .links-container {
                display: none;
            }

            .scroll-btn {
                display: none;
            }

            .scroll-wrapper {
                scroll-snap-type: x mandatory;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .link-item {
                scroll-snap-align: start;
            }
        }


        .amap-info-close {
            display: none !important;
        }


        .caseImg {
            width: 370px !important;
            height: 370px !important;
            display: flex;
            align-items: center;
            background: rgb(243, 243, 242);
        }

        .caseImg img {
            display: inline-block;
            width: 100%;
            height: auto;
            align-items: center;
        }

        /* 添加错误提示样式 */
        .form-control.error {
            border: 1px solid #dc3545 !important;
        }

        .error-msg {
            color: #dc3545;
            font-size: 0.875em;
            height: 20px;
            margin-top: 5px;
            display: none;
        }

        .error-msg.show {
            display: block;
        }

        /* 自定义缩略图样式 */
        .carousel-thumbnails {
            padding: 0 15px;
        }

        .thumbnail {
            border: 2px solid transparent;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .thumbnail:hover {
            border-color: #dc3545 !important;
        }

        .carousel-item {
            transition: transform 0.6s ease-in-out;
        }

        @media (max-width: 768px) {
            .carousel-item img {
                height: 300px !important;
            }

            .thumbnail {
                height: 40px !important;
            }
        }

        .mt {
            margin-left: 5px;
        }

       table {
            border: 1px solid #dee2e6 !important;
        }

        table td,
        table th {
            border: 1px solid #dee2e6 !important;
        }
        .decoration-line {
            height: 2px;
            background: #f1501a;
            margin: 15px 0;
        }
        .contact-btn{
            color:#f1501a;
            border: 1px solid #f1501a;
            padding: 5px;
            border-radius: 10px;
        }
        .contact-btn:hover{
            color:#f1501a;
            border: 1px solid #f1501a;
            padding: 5px;
            border-radius: 10px;
        }

        .decoration-top-line{
            height: 1px;
            background: #c1c1c1;
            margin: 15px 0;
        }
        .product-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
            padding: 25px 0;
        }
        .product-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid #eee;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .product-image {
            height: 220px;
            overflow: hidden;
            background-color: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px;
        }

        .product-image img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .product-info {
            padding: 20px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .product-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: #ff6600;
            margin-bottom: 10px;
        }

        .product-description {
            color: #666;
            margin-bottom: 15px;
            flex-grow: 1;
        }

        .product-features {
            margin-top: auto;
        }

        /* 外部控制按钮 */
        .external-controls {
            position: absolute;
            top: 50%;
            left:0%;
            right: 0%;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            z-index: 20;
            pointer-events: none;
        }

        .external-controls button {
            pointer-events: auto;
            width: 70px;
            height: 70px;
            background-color: rgba(230, 57, 70, 0.85);
            border: none;
            border-radius: 50%;
            color: white;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .external-controls button:hover {
            background-color: rgba(230, 57, 70, 1);
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
        }

        @media (max-width: 768px) {



            .external-controls button {
                width: 60px;
                height: 60px;
                font-size: 1.5rem;
            }


        }

    </style>
</head>

<body>
    <div class="body_wrapper">
        <div id="preloader">
            <div id="ctn-preloader" class="ctn-preloader">
                <img src="{$loader}" alt="{$site_name}" style="width: 200px !important;" />
            </div>
        </div>
        <!-- 头部 -->
        <header>
            <div class="header_top">
            </div>
            <nav class="navbar navbar-expand-lg" id="header">
                <div class="container">
                    <a class="navbar-brand" href="#"><img src="{$site_logo}" style="width: 110px;"
                            alt="{$site_name}" /></a>
                    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="menu_toggle"> </span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto menu">
                            {volist name='navMenu' id='item'}
                            <li class="nav-item {if $item['url'] == $url}active{/if}">
                                <a class="nav-link " href="{$item['url']}" role="button">
                                    {$item.title}
                                </a>

                            </li>
                            {/volist}

                        </ul>
                        <!-- <ul class="list-unstyled navbar-nav navright">
                            <li>
                                <a href="#" class="search"><i class="fas fa-search"></i></a>
                            </li>
                        </ul> -->
                    </div>
                </div>
            </nav>
        </header>
        <!-- 内容部分占位符 -->
        {block name="content"}{/block}

        <!--footer_area-->
        <footer class="footer_area">
            <!-- <div class="footer_top">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6 col-sm-6">
                            <div class="f_widget f_latest_widget">
                                <h3 class="f-title">最新消息</h3>
                                <div class="f_latest_info">
                                    <div class="media f_latest_item">
                                        <div class="img_hover">
                                            <i class="fas fa-plus"></i>
                                            <img src="assets/img/home-one/f_post_1.jpg" alt="" />
                                        </div>
                                        <div class="media-body">
                                            <a href="#">
                                                <h5>
                                                    Proper marketing plan
                                                </h5>
                                            </a>
                                            <a href="#" class="l_date">5 hours ago</a>
                                        </div>
                                    </div>
                                    <div class="media f_latest_item">
                                        <div class="img_hover">
                                            <i class="fas fa-plus"></i>
                                            <img src="assets/img/home-one/f_post_2.jpg" alt="" />
                                        </div>
                                        <div class="media-body">
                                            <a href="#">
                                                <h5>
                                                    Retain your customers
                                                </h5>
                                            </a>
                                            <a href="#" class="l_date">12 hours ago</a>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                  
                        <div class="col-lg-6 col-sm-6">
                            <div class="f_widget f_recnt_widget">
                                <h3 class="f-title">Instagram Gallery</h3>
                                <ul class="list-unstyled recent_post_gallery">
                                    <li>
                                        <a href="#">
                                            <i class="fas fa-plus"></i>
                                            <img src="assets/img/home-one/f_recent_post1.jpg" alt="" /></a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fas fa-plus"></i>
                                            <img src="assets/img/home-one/f_recent_post2.jpg" alt="" /></a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fas fa-plus"></i>
                                            <img src="assets/img/home-one/f_recent_post3.jpg" alt="" /></a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fas fa-plus"></i>
                                            <img src="assets/img/home-one/f_recent_post4.jpg" alt="" /></a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <i class="fas fa-plus"></i>
                                            <img src="assets/img/home-one/f_recent_post5.jpg" alt="" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><i class="fas fa-plus"></i>
                                            <img src="assets/img/home-one/f_recent_post6.jpg" alt="" /></a>
                                    </li>

                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
            <div class="footer_bottom">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12 col-md-12 text-center">
                            <p>
                                Copyright ©
                                <script>
                                    document.write(new Date().getFullYear());
                                </script>
                                <a href="#" title="">{$site_name}</a>. All Rights Reserved.
                            </p>
                            <p> {$record_number} </p>
                        </div>

                    </div>
                </div>
            </div>
        </footer>
        <!--footer_area-->
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="assets/js/jquery-3.4.1.min.js"></script>

    <script src="assets/vendors/bootstrap/js/popper.min.js"></script>
    <script src="assets/vendors/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/vendors/slick/slick.min.js"></script>
    <script src="assets/js/parallaxie.js"></script>
    <script src="assets/vendors/circle-progressbar/jquery.waypoints.min.js"></script>
    <script src="assets/vendors/circle-progressbar/jquery.counterup.min.js"></script>
    <script src="assets/vendors/circle-progressbar/circle-progress.js"></script>
    <script src="assets/vendors/magnify-popup/jquery.magnific-popup.min.js"></script>
    <script src="assets/vendors/wow/wow.min.js"></script>
    <script src="assets/js/main.js"></script>
    {block name="script"}{/block}


</body>